<template>
    <div class="jianzhan-content">
        <Crumb name="入库"/>
        <div class="content">
            <Search>
                <el-input v-model="key" class="input" size="small" prefix-icon="el-icon-search"
                          placeholder="根据入库单查询"/>
            </Search>
            <div class="table-wrapper">
                <el-table border
                          stripe
                          row-key="id"
                          @expand-change="getPartDetail"
                          :data="stockList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                >
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table  :data="props.row.partList" border>
                                <el-table-column
                                        prop="partsNumber"
                                        label="配件编号"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="denomination"
                                        label="中文名称"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="designation"
                                        label="英文名称"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="partsQuantity"
                                        label="数量"
                                >
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column label="入库单号" prop="stockInNum"/>
                    <el-table-column label="船号" prop="shipNumber"/>
                    <!--<el-table-column label="出口方" prop="exporterDesc"/>-->
                    <el-table-column label="出口单号" prop="exportNum"/>
                    <el-table-column label="入库日期" prop="stockInDateStr"/>
                    <el-table-column label="详情">
                        <template slot-scope="stock">
                            <el-button  type="primary" size="small" @click="showDetail(stock.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="入库详情" :visible.sync="dialogVisible" width="80%">
            <el-form :model="stock" ref="stock" :rules="rule" label-width="150px">
                <div class="flex">
                    <div class="flex-content">
                        <el-form-item label="用途" prop="exploit">
                            {{stock.exploitDesc}}
                        </el-form-item>
                        <el-form-item label="出口单号" prop="exportNum">
                            {{stock.exportNum}}
                        </el-form-item>
                        <el-form-item label="入库日期" prop="stockInDateStr">
                            {{stock.stockInDateStr}}
                        </el-form-item>
                        <el-form-item label="仓库" prop="warehouse">
                            {{stock.warehouseDesc}}
                        </el-form-item>
                    </div>
                    <div class="flex-content">
                        <!--<el-form-item label="出口方" prop="exporter">-->
                           <!--{{stock.exporterDesc}}-->
                        <!--</el-form-item>-->
                        <el-form-item label="船号" prop="shipNumber">
                            {{stock.shipNumber}}
                        </el-form-item>
                        <el-form-item label="入库单号">
                            {{stock.stockInNum}}
                        </el-form-item>
                        <el-form-item label="总箱数" prop="totalBoxes">
                            {{stock.totalBoxes}}
                        </el-form-item>

                    </div>
                </div>
                <Data-Base @deleteItem="deleteItem" :partList="partList" :edit="false"/>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import DataBase from '../../components/part/spDataBase'
    import {getStockInList, getStockInDetail, getStockInRecord} from "../../api/service";
    import {getWarehouseList} from "../../api/warehouse";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import spMixins from '../../util/spMixins'

    export default {
        name: "stock-out",
        mixins: [mixins, spMixins],
        data() {
            return {
                list: [],
                workNoList: [],
                notExist:[],
                rule:{
                    stockInDateStr:[{required:true}],
                    exploit:[{required:true}],
                    exporter:[{required:true}],
                    exportNum:[{required:true}],
                    shipNumber:[{required:true}],
                    totalBoxes:[{required:true}],
                    warehouse:[{required:true}]
                },
                warehouseList:[],
                stock: {
                    stockInNum:'',
                    stockInDateStr:'',
                    stockOutDetails: [],
                    exploit:'',
                    exporter:'',
                    exportNum:'',
                    warehouse:'',
                    shipNumber:'',
                    totalBoxes:''
                },
                key: '',
                dialogVisible: false,
                editable:true
            }
        },
        computed: {
            stockList() {
                return this.list.filter(item => item.stockInNum.indexOf(this.key) > -1)
            },
            stockinNum(){
                const {exploit,exporter,exportNum,shipNumber,totalBoxes} = this.stock;
                const e = ['CON','SP'];
                const exp = ['INLINE','SHCMAN'];
                return `MOR/${e[exploit] || ''}/${exp[exporter] || ''}${exportNum}/${shipNumber}/${totalBoxes}`
            }
        },
        created() {
            this._getStockInList();
            this.getWarehouseList()
        },
        methods: {
            async getWarehouseList(){
                const {status,data} = await getWarehouseList();
                if (status === ERROR_OK ) {
                    this.warehouseList = data
                }
            },
            async getPartDetail(r){
                if(r.partList){
                    return
                }
                const {status,data} = await getStockInRecord(r.id);
                if(status===ERROR_OK) {
                    r.partList = data;
                    const index = this.list.findIndex(item=>item.id===r.id);
                    this.list.splice(index,1,r);
                }

            },
            async showDetail(stock) {
                this.dialogVisible = true;
                this.editable = false;
                const {status,data} = await getStockInDetail(stock.id);
                if(status === ERROR_OK ) {
                    this.stock = stock;
                    this.partList = data.map(part => {
                        return {
                            ...part.spareParts,
                            number: part.partsQuantity
                        }
                    })
                }
            },
            async _getStockInList() {
                const {status, data} = await getStockInList(1);
                if (status === ERROR_OK) {
                    this.list = data;
                    this.total = data.length
                }
            },
            clear() {
                this.partList = [];
                this.stock = {
                    id:undefined,
                    warehouse:'',
                    stockInNum:'',
                    stockInDateStr:'',
                    stockOutDetails: [],
                    exploit:'',
                    exporter:'',
                    exportNum:'',
                    shipNumber:'',
                    totalBoxes:''
                };
                this.$nextTick(()=>{
                    this.$refs.file.value = ''
                })
            },
        },
        watch: {
            stockList(list) {
                this.total = list.length
            }
        },
        components: {
            Crumb, Search, DataBase
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
    .flex{
        display: flex;
        .flex-content{
            flex: 1;
        }
    }
    .input{
        width: 50%;
    }
</style>